<template>
  <div class="container">
    <div class="top">
      <div class="myPhoto">
        <img class="myPhoto" src="../../assets/img/头像.png" alt="" />
      </div>
      <div class="right">
        <h2 class="row">男神味的果冻</h2>
        <div class="row">
          <div class="stat">
            <el-statistic
              group-separator=","
              :value="stat.viewCount"
              :title="stat.viewTitle"
            ></el-statistic>
            <el-statistic
              group-separator=","
              :value="stat.artCount"
              :title="stat.artTitle"
            ></el-statistic>
            <el-statistic
              group-separator=","
              :value="stat.fansCount"
              :title="stat.fansTitle"
            ></el-statistic>
          </div>
        </div>
        <div class="row">这个人很懒，什么都没留下~</div>
      </div>
      <div class="right-end">
        <router-link :to="{ name: 'Edit' }">
          <el-button class="edit" type="primary" plain>编辑个人资料</el-button>
        </router-link>
      </div>
    </div>

    <!-- 渲染对应的板块 -->
    <div class="bottom">
      <div class="bottom-nav">
        <router-link class="tag" :to="{ name: 'ArtList' }">文章</router-link>
        <router-link class="tag" :to="{ name: 'FansList' }">粉丝</router-link>
        <router-link class="tag" :to="{ name: 'FollowListUser' }"
          >关注</router-link
        >
        <router-link class="tag" :to="{ name: 'CollectList' }"
          >收藏</router-link
        >
      </div>

      <!-- 渲染对应的板块 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "Personal",
  data() {
    return {
      //个人信息统计
      stat: {
        viewTitle: "总访问量",
        viewCount: 12314,
        artTitle: "答疑总数",
        artCount: 236,
        fansTitle: "粉丝总数",
        fansCount: 2103,
      },
      user: {},
    };
  },
};
</script>

<style scoped>
.container {
  margin: 10px auto;
  width: 1000px;
  max-height: 700px;
}

.top {
  width: 100%;
  height: 230px;
  background-color: white;
  padding: 20px;
  display: flex;
  justify-content: left;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.myPhoto {
  width: 160px;
  height: 160px;
  border-radius: 10px;
  margin-top: 10px;
}

.top .right {
  width: 300px;
  height: 200px;
  padding-top: 40px;
  padding-left: 20px;
}

.top .right .row {
  height: 30px;
  text-align: left;
  margin: 20px 0;
}

.top .right .stat {
  height: 30px;
  display: flex;
  justify-content: left;
  align-items: center;
}

.top .right-end {
  width: 500px;
  margin-top: 100px;
  display: flex;
  justify-content: right;
}

.top .right-end .edit {
  height: 80px;
}

.bottom {
  margin: 10px auto;
  width: 1000px;
  height: 500px;
  background-color: white;
}

.bottom-nav {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  justify-content: left;
  align-items: center;
}

.bottom-nav .tag {
  display: block;
  margin: 0 20px;
  color: black;
}

.bottom-nav .tag {
  display: block;
  margin: 0 20px;
  color: black;
}

.bottom-nav .tag:hover {
  color: #056de8;
}
</style>
